<template>
    <div class="tnxbsv-form-group b-form-group" :prop="prop">
        <div class="tnxbsv-form-group__label-wrapper">
            <slot name="label">
                <label class="form-label" :style="labelStyle">{{ label }}</label>
            </slot>
        </div>
        <div class="tnxbsv-form-group__content-wrapper">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TnxbsvFormGroup',
    props: {
        label: String,
        labelWidth: [String, Number],
        prop: String,
    },
    data() {
        return {
            model: {},
        };
    },
    computed: {
        labelStyle() {
            let style = {};
            if (this.labelWidth) {
                let width;
                if (typeof this.labelWidth === 'string') {
                    // 如果是纯数字内容，则附加px单位
                    if (/^\d+$/.test(this.labelWidth)) {
                        width = this.labelWidth + 'px';
                    } else {
                        width = this.labelWidth;
                    }
                } else {
                    width = this.labelWidth + 'px';
                }
                style.width = width;
            }
            return style;
        },
    },
    methods: {}
}
</script>

<style>
.tnxbsv-form-group {
    display: flex;
}

.tnxbsv-form-group__label-wrapper {
    padding-top: 0.375rem;
}

.tnxbsv-form-group__content-wrapper {
    flex-grow: 1;
    min-height: 2.375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inline-feedback .tnxbsv-form-group__content-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: unset;
}
</style>
